<template>
	<view style="padding-left: 30rpx;">
		<view style="height: 20rpx;"></view>
		<view style="display: flex;flex-wrap: wrap;">
			<view class="label" :class="item==select?'active':''" v-for="item,index in labelList" :key="index" @click="changeLabel(item)">
				<text>{{item}}</text>
			</view>
		</view>
		<view style="height: 20rpx;background: #F9F9F9;"></view>
		<view style="height: 20rpx;"></view>
		<block v-for="(value,key) in cityList" :key="key">
			<!-- <view style="height: 72rpx;line-height: 72rpx;font-size: 30rpx;font-weight: bold;">{{value[0].name}}</view> -->
			<view style="display: flex;flex-wrap: wrap;">
				<view class="label" v-for="item in value" :key="item.id" @click="changeValue(item)">
					<text>{{item.name}}</text>
				</view>
			</view>
		</block>
		<view style="color: #797979;text-align: center;font-size: 26rpx;padding: 20rpx;">--- 没有更多了 ---</view>
	</view>
</template>

<script>
	import { getCityList } from '@/api/index.js'
	export default {
		data() {
			return {
				type:'', // 选终点或起点
				select: '全部',
				params: {
					start_id: 0
				},
				orginCityList: {},
				labelList: ['全部', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
				cityList:{}
			}
		},
		onLoad(options) {
			this.type = options.type
			if(options.start_id){
				this.params.start_id = options.start_id
			}
			this.getCityList()
		},
		methods: {
			// 切换字母
			changeLabel(item) {
				this.select = item
				if(item=='全部'){
					this.cityList = JSON.parse(JSON.stringify(this.orginCityList))
				}else{
					this.cityList = {
						item:this.orginCityList[item]
					}
				}
			},
			// 去选择详细地址
			changeValue(item) {
				const that = this
				if(that.type=='start'){
							uni.$emit('update:tailwindQdInfo',item.id,item.name,'','','')
						}else{
							uni.$emit('update:tailwindZdInfo',item.id,item.name,'','','')
						}
						uni.navigateBack()
				
				// const that = this
				// uni.chooseLocation({
				// 	latitude:item.lat-0,
				// 	longitude:item.lng-0,
				// 	success: function (res) {
				// 		console.log(res)
				// 		if(that.type=='start'){
				// 			uni.$emit('update:tailwindQdInfo',item.id,item.name,res.latitude,res.longitude,res.name)
				// 		}else{
				// 			uni.$emit('update:tailwindZdInfo',item.id,item.name,res.latitude,res.longitude,res.name)
				// 		}
				// 		uni.navigateBack()
				// 	}
				// })
			},
			async getCityList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				const res = await getCityList(this.params)
				uni.hideLoading()
				if (res.code != 1) return
				this.orginCityList = res.data
				this.cityList = res.data
			}
		}
	}
</script>

<style>
	.label {
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		padding: 0 30rpx;
		height: 64rpx;
		box-sizing: border-box;
		border: 2rpx solid #DDDDDD;
		border-radius: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #333333;
		font-size: 26rpx;
	}

	.active {
		border: none !important;
		background: #26D360 !important;
		color: #FFFFFF !important;
		border: 2rpx solid #26D360!important;
	}
</style>